<template>
  <el-dialog title="新增员工" :visible="showDialog" top="4vh" @close="onClose">
    <!-- 表单 -->
    <el-form
      ref="addFormRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="姓名" prop="username">
        <el-input
          v-model="formData.username"
          style="width: 80%"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input
          v-model="formData.mobile"
          style="width: 80%"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker
          v-model="formData.timeOfEntry"
          style="width: 80%"
          placeholder="请选择入职时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select
          v-model="formData.formOfEmployment"
          style="width: 80%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in hireType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input
          v-model="formData.workNumber"
          style="width: 80%"
          placeholder="请输入工号"
        />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input
          :value="formData.departmentName"
          style="width: 80%"
          placeholder="请选择部门"
          @click.native="getDeptList"
        />
        <!-- 部门树形结构 -->
        <div v-show="isShowTree" class="tree-box">
          <el-tree
            v-loading="loading"
            v-if="deptTreeData.length"
            :data="deptTreeData"
            :props="{ label: 'name' }"
            @node-click="onNodeClick"
          />
        </div>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker
          v-model="formData.correctionTime"
          style="width: 80%"
          placeholder="请选择转正时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="onClose" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="handleOK">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getDeptListAPI } from "@/api/departments";
import { postEmployeeAPI } from "@/api/employees";
import { list2Tree } from "@/utils/transform";
// 导入常量模块
import obj from "@/constant/employees";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 员工表单对象
      formData: {
        username: "", // 用户名
        mobile: "", // 手机号
        formOfEmployment: "", // 聘用形式
        workNumber: "", // 工号
        departmentName: "", // 部门
        timeOfEntry: "", // 入职时间
        correctionTime: "", // 转正时间
      },
      // 员工表单校验规则
      rules: {
        username: [
          {
            required: true,
            message: "用户姓名不能为空",
            trigger: ["blur", "change"],
          },
          {
            min: 1,
            max: 4,
            message: "用户姓名为1-4位",
            trigger: ["blur", "change"],
          },
        ],
        mobile: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: ["blur", "change"],
          },
        ],
        formOfEmployment: [
          {
            required: true,
            message: "聘用形式不能为空",
            trigger: ["blur", "change"],
          },
        ],
        workNumber: [
          {
            required: true,
            message: "工号不能为空",
            trigger: ["blur", "change"],
          },
        ],
        departmentName: [
          {
            required: true,
            message: "部门不能为空",
            trigger: "change",
          },
        ],
        timeOfEntry: [
          {
            required: true,
            message: "请选择入职时间",
            trigger: ["blur", "change"],
          },
        ],
      },
      // 部门树形数据
      deptTreeData: [],
      // 控制树形组件的加载状态
      loading: false,
      // 是否展示树形结构
      isShowTree: false,
      // 聘用形式列表
      hireType: obj.hireType,
    };
  },
  methods: {
    // 新增
    async handleOK() {
      // 1. 发请提交请求
      await postEmployeeAPI(this.formData);
      // 2. 给个成功的提示
      this.$message.success("新增员工成功");
      // 3. 关闭弹框
      this.onClose();
      // 4. 重新获取员工列表
      this.$emit("on-add-success");
    },
    // 当树的每个节点被点击时
    onNodeClick(item) {
      this.isShowTree = false;
      // item是每个节点对象
      // 判断item是否有children，有的话就提前结束
      if (item.children) return;
      // 否则赋值，把当前选择的部门名称显示在输入框中
      this.formData.departmentName = item.name;
    },
    // 弹框关闭时
    onClose() {
      // 1. 子传父 -> 通知老爹 -> 修改isVisible为false
      this.$emit("on-close");
      // 2. 重置表单并移除校验结果
      this.$refs.addFormRef.resetFields();
    },
    // 获取部门列表
    async getDeptList() {
      this.isShowTree = true;
      // 如果 depeTreeData 不为空，说明发过请求，就提前结束
      if (this.deptTreeData.length) return;
      this.loading = true;
      // 1. 发请求
      const resp = await getDeptListAPI();
      // 2. 转为树形结构在赋值
      this.deptTreeData = list2Tree(resp.data.depts);
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-box {
  position: absolute;
  width: 80%;
  min-height: 50px;
  max-height: 200px;
  left: 0;
  top: 45px;
  z-index: 100;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-right: 5px;
  overflow: hidden;
  background-color: #fff;
  max-height: 200px;
  overflow: auto;
  ::v-deep {
    .el-tree-node__content {
      height: auto;
    }
  }
}
</style>
